//1. 获取要操作的元素
let itemContentRight=document.querySelector('.item-contentRight')
let ul=document.querySelector('.item-contentRight>ul')
let ulis=document.querySelectorAll('.item-contentRight>ul>li')
let olis=document.querySelectorAll('.item-contentRight>ol>li')
let prev=document.querySelector('.item-contentRight .left')
let next=document.querySelector('.item-contentRight .right')
 // 2. 实现自动轮播:(通过定时器显示自动轮播)
 let n = 0; // 定义一个变量n ，表示需要显示的图片li的索引
 let timer = setInterval(function () {
   /* 
     自动轮播的思路：
         每过一段时间2秒，索引n++，显示下一张图片的li以及小圆点高亮显示
         先清空所有li的样式，然后给对应的li显示高显样式
    */
   n++; // 索引n加1
   play();
 }, 6000);

 // 3. 鼠标移入移出轮播暂停和开始
 itemContentRight.onmouseenter = () => clearInterval(timer); // 鼠标移入暂停定时器

 itemContentRight.onmouseleave = function () {
   timer = setInterval(function () {
     n++; // 索引n加1
     play();
   }, 6000);
 }

 // 4. 实现点击上一张下一张
 prev.onclick = () => { // 点击实现上一张图片      
   n--;
   play();
 }
 next.onclick = () => { // 点击实现下一张图片      
   n++;
   play();
 }

 // 5. 点击小圆点实现切换图片
 // 遍历olis，给每一ol下的li绑定点击事件
 for (let i = 0; i < olis.length; i++) {
   olis[i].onclick = function () { // 点击小圆点实现图片切换和圆点高亮显示
     // 将循环中的i就是点击的索引下标，将i赋值给n
     n = i;
     play();
   }
 }

 // 封装一个图片li显示和小圆点高显
 function play() {
   if (n < 0) {
     n = 3;
   }
   if (n == 4) {
     n = 0;
   }
   //  遍历ulis
   for (let i = 0; i < ulis.length; i++) {
     ulis[i].className = '';
   }
   // 给对应的图片li显示样式
   ulis[n].className = 'current';
   //  遍历olis
   for (let i = 0; i < olis.length; i++) {
     olis[i].className = '';
   }
   // 给对应的图片li显示样式
   olis[n].className = 'active';

 }
